<template>
  <view class="container">
    <!-- 金币数量 -->
    <view class="coins-header">
      <view class="coins-amount">
        <text class="amount">4</text>
        <text class="detail">金币明细 ></text>
      </view>
    </view>

    <!-- 签到奖励 -->
    <view class="sign-rewards">
      <view class="sign-title">每日签到领金币</view>
      <view class="sign-list">
        <view class="sign-item" v-for="(reward, index) in signRewards" :key="index">
          <text class="reward-amount">+{{ reward }}</text>
          <view class="coin-icon">⭐</view>
        </view>
      </view>
      <button class="sign-btn">立即签到</button>
    </view>

    <!-- 推荐任务 -->
    <view class="task-list">
      <view class="task-header">
        <text>推荐邀请领福利</text>
        <text class="more">邀请列表 ></text>
      </view>
      
      <view class="task-item">
        <view class="task-info">
          <view class="task-icon">👥</view>
          <view class="task-detail">
            <text class="task-name">邀请好友得金币</text>
            <text class="task-desc">+5金币每人，多邀多得</text>
          </view>
        </view>
        <button class="task-btn">去邀请</button>
      </view>

      <view class="task-item">
        <view class="task-info">
          <view class="task-icon">🎬</view>
          <view class="task-detail">
            <text class="task-name">观看视频得金币</text>
            <text class="task-desc">+2金币每次，今日剩5次</text>
          </view>
        </view>
        <button class="task-btn">看视频</button>
      </view>

      <view class="task-item">
        <view class="task-info">
          <view class="task-icon">👑</view>
          <view class="task-detail">
            <text class="task-name">包一个月VIP</text>
            <text class="task-desc">满10人领取，已邀请0</text>
          </view>
        </view>
        <button class="task-btn">去邀请</button>
      </view>

      <view class="task-item">
        <view class="task-info">
          <view class="task-icon">💰</view>
          <view class="task-detail">
            <text class="task-name">推荐好友赚现金</text>
            <text class="task-desc">最高50%佣金秒到账</text>
          </view>
        </view>
        <button class="task-btn highlight">赚佣金</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const signRewards = ref([2, 5, 8, 8, 10, 10, 15])
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background: #f8f8f8;
  min-height: 100vh;
}

.coins-header {
  background: linear-gradient(to right, #ff9966, #ff5e62);
  padding: 40rpx 30rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.coins-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .amount {
    font-size: 60rpx;
    color: #fff;
    font-weight: bold;
  }
  
  .detail {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.sign-rewards {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.sign-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 30rpx;
}

.sign-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.sign-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .reward-amount {
    font-size: 26rpx;
    color: #ff6b6b;
    margin-bottom: 10rpx;
  }
  
  .coin-icon {
    font-size: 40rpx;
  }
}

.sign-btn {
  background: #35ae91;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 30rpx;
}

.task-list {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  font-size: 30rpx;
  color: #333;
  
  .more {
    font-size: 26rpx;
    color: #999;
  }
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.task-info {
  display: flex;
  align-items: center;
}

.task-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.task-detail {
  display: flex;
  flex-direction: column;
  
  .task-name {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 6rpx;
  }
  
  .task-desc {
    font-size: 24rpx;
    color: #999;
  }
}

.task-btn {
  font-size: 26rpx;
  color: #35ae91;
  background: #fff;
  border: 1px solid #35ae91;
  border-radius: 8rpx;
  padding: 10rpx 30rpx;
  
  &.highlight {
    background: #ff6b6b;
    color: #fff;
    border: none;
  }
}
</style> 